﻿<!DOCTYPE html>
<html>
<head>    
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>登录</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/font_43459_lbtux0zjkr6yldi.css">

    <!-- 引入 vue  -->
    <script src="/js/vue.js"></script>
    <!-- axios 发送请求  -->
    <script src="/js/axios-0.18.0.js"></script>

    <!-- 引入 elementUI css -->
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <!-- 引入 elementUI css -->
    <script src="/plugins/elementui/index.js"></script>

    <script src="/js/request.js"></script>
</head>
<body>
    <div id="main" class="main-warp">
        <div class="main-content">
            <div class="formDiv">
                <h2 class="text-center">登录</h2>
                <form id="loginForm" method="post">
                    <div class="dataform" >
                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-yonghu1"></span>
                            <input type="text" v-model="loginVo.username"  class="inputs" placeholder="手机号码或邮箱" maxlength="64">
                        </div>
                        <div class="error-content">
                            <span id="userNameErr" class="errMsg"></span>
                        </div>

                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-baomi"></span>
                            <input class="inputs" type="password" v-model="loginVo.password" placeholder="密码" maxlength="20">
                        </div>
                        <div class="error-content">
                            <span id="passwordErr" class="errMsg"></span>
                        </div>

                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-baomi"></span>
                            <select>
                                <option>请选择</option>
                            </select>
                        </div>
                        <div class="btn-warp gap">
                            <div class="text-center">
                                <input type="hidden" value="jsform" id="_app"/>
                                <button type="button" @click="loginAxios" class="btn btn-block lgbtn blue">登录</button>
                            </div>
                        </div>
                        <div class="biggap third-party-title">
                            <h5 class="text-center"><span>第三方账号登录</span></h5>
                        </div>
                        <div class="third-auth">
                            <a title="用钉钉登录" class="dt" href="javascript:;"></a>
                            <a title="用微信账户登录" class="wx" href="javascript:;"></a>
                            <a title="用QQ账户登录" class="qq" href="javascript:;"></a>
                        </div>
                    </div>
                </form>
                <!--  button 如果 在 form 表单内部、默认是 提交表单数据   -->
                <button @click="test"> 测试 </button>
            </div>

        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el:"#main",
        data(){
            return {
                /*登陆用户数据模型*/
                loginVo: {
                    username: 'admin',
                    password: '123'
                }
            }
        },
        methods: {

            loginAxios(){
                //拿到数据
                //发送请求
                axios.post("/user/login",this.loginVo).then(resp=>{
                    console.log(resp.data.message);
                    alert(resp.data.message);
                    if(resp.data.code == 200){

                        //拿到返回的token
                        let token = resp.data.data;
                        //存储token
                        //浏览器有一个本地存储
                        localStorage.setItem("token",token);
                        //跳转到主页
                        location.href = "/pages/main.html";
                    }
                })
            },
            test(){
                request({
                    method:"GET",
                    url:"/user/testLogin2"
                }).then(resp=>{
                    console.log(resp.data);
                })
            }
        },
        created() {

        }
    });
</script>